<template>
  <div class="panel-tab__content">
    <el-form size="mini" label-width="90px" @submit.native.prevent>
      <el-form-item label="ID">
        <el-input
          v-model="bpmn.bpmnData.id"
          :disabled="bpmn.bpmnData.$type === 'bpmn:Process'"
          clearable
          @change="updateBaseInfo('id')"
        />
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="bpmn.bpmnData.name" clearable @change="updateBaseInfo('name')" />
      </el-form-item>
    </el-form>
  </div>
</template>
/**
* @description
* @author mao
* @time: 2021/8/12 1:44 下午
**/
<script>
export default {
  name: 'PanelBase',
  inject: {
    bpmn: {
      from: 'bpmn'
    },
    setExtensions: {
      from: 'setExtensions'
    }
  },
  methods: {
    updateBaseInfo(key) {
      const attrObj = Object.create(null)
      attrObj[key] = this.bpmn.bpmnData[key]
      if (key === 'id') {
        const val = this.bpmn.bpmnData[key]
        this.bpmn.modeling.updateProperties(this.bpmn.bpmnElement, {
          id: val,
          di: { id: `${val}_di` }
        })
      } else {
        this.bpmn.modeling.updateProperties(this.bpmn.bpmnElement, attrObj)
      }
    }
  }
}
</script>

<style scoped>

</style>
